* {
  margin: 0;
  padding: 0;
}

:root {
  --body-color: #fcc5da;
  --body-shadow-color: #f98b99;
  --right-hand-color: #ffb1c6;
  --cheek-color: #f988be;
  --mouth-one-color: #7b2123;
  --mouth-two-color: #f6605c;
  --foot-color: #e7547d;
  --blue-color: #326bf7;
  --white-color: #fff;
  --black-color: #000;
}

body {
  height: 100vh;
  background: #fbffeb;
}

/* 元素固定定位后，它可以倍内部的标准流中的子元素自动撑宽撑高 */

.kirby {
  position: fixed;
  left: 50%;
  top: 20vh;
  transform: translateX(-50%);
  /* background-color: skyblue; */
}

/* 第一个普通的标准流子级 */

.head {
  width: 400px;
  height: 370px;
  background-color: var(--body-color);
  border-radius: 50%;
  box-shadow: inset 1px -35px 60px var(--body-shadow-color),
    40px 20px 60px rgba(0, 0, 0, 0.2);
}

.hand {
  position: absolute;
  width: 150px;
  height: 250px;
  background-color: var(--body-color);
  border-radius: 100%;
  border-bottom-left-radius: 40% 100%;
  z-index: -1;
}

.hand_l {
  left: 50px;
  top: -90px;
  transform: rotate(16deg);
}

.hand_r {
  right: -10px;
  top: 60px;
  background-color: var(--right-hand-color);
  transform: rotate(90deg);
  box-shadow: 40px 20px 60px rgba(0, 0, 0, 0.2);
}

.eye {
  position: absolute;
  width: 35px;
  height: 92px;
  border-radius: 50px/90px;
  background-color: black;
  transform: rotate(17deg);
}

.eye_l {
  left: 200px;
  top: 70px;
}

.eye_r {
  left: 260px;
  top: 90px;
}

.eye::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 23px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
}

.eye::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 5px;
  width: 25px;
  height: 54px;
  border-radius: 30px/50px;
  box-shadow: inset 0px -17px 4px var(--blue-color);
}

.check {
  position: absolute;
  width: 60px;
  height: 30px;
  border-radius: 50%;
  background: var(--cheek-color);
}

.check_l {
  left: 104px;
  top: 125px;
  transform: rotate(16deg);
}

.check_r {
  left: 297px;
  top: 195px;
  transform: rotate(16deg);
}

.mouth {
  position: absolute;
  left: 190px;
  top: 200px;
  transform: rotate(17deg);
  width: 58px;
  height: 35px;
  border-radius: 10px 10px 40px 40px;
  box-shadow: inset 1px 2px 12px 1px var(--mouth-one-color);
}

.mouth::before {
  position: absolute;
  left: 250px;
  top: 12px;
  width: 70px;
  height: 50px;
  background-color: var(--mouth-two-color);
  box-shadow: inset 1px 1px;
}

.foot {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 230px;
  background-color: var(--foot-color);
}

.foot_l {
  left: 30px;
  top: 243px;
  z-index: -1;
  transform: rotate(-6deg);
  border-radius: 60% 60% 70% 70%/50% 50% 90% 90%;
  box-shadow: inset -15px -10px 50px 4px var(--mouth-one-color);
}

.foot_r {
  height: 200px;
  left: 256px;
  top: 236px;
  border-radius: 60% 60% 50% 50%/80% 80% 40% 40%;
  transform: rotate(50deg);
  box-shadow: inset 1px -5px 30px 2px white,
    inset -5px 10px 30px 4px rgba(0, 0, 0, 0.2),
    20px 0px 20px rgba(0, 0, 0, 0.2);
}
